<template>
	<div class="content boxFlex">
			<div class="notFound-content">
				<div class="image-text-box flex">
					<div class="image-box">
						<img src="@/assets/image/404.png" alt="">
					</div>
					<div class="text-box flex">
							<h1>sorry 您访问的页面弄丢了</h1>
							<p>您可以通过以下方式继续访问......</p>
							<div id="back" @click="backTo()">返回首页</div>
					</div>
				</div>
			</div>
	</div>
</template>
<script>
export default {
	mounted() {
		webSocket.webSocketClose()
	},
	methods:{
		backTo(){
			this.$router.replace("/")	
		}	
	}
}
</script>
<style scoped="scoped">
	.content{
		overflow:hidden;
	}
	.notFound-content{
		background-color: #1C85C1;
		width: 1920px;
		height: 100vh;
		margin: 0 auto;	
	}	
	.image-text-box{
		width: 1200px;
		height: 367px;	
		margin: 100px auto 0 auto;	
		flex-direction: row;
	}
	.flex{
		display: flex;
		justify-content: center;
	}
	.image-box{
		width: 325px;
		height: 367px;	
	}
	.text-box{
		width: 400px;
		height: 367px;			
		flex-direction: column;	
	}
	.text-box>h1,.text-box>p{
		color: #8EF6F8;
		font-family: Microsoft YaHei;
	}
	.text-box>h1{
		height: 37px;	
		font-weight: bold;		
		line-height: 20px;	
	}
	.text-box>p{		
		height: 20px;
		font-size: 17px;
		font-weight: 400;
		line-height: 20px;		
	}
	.text-box>div{
		width: 180px;
		height: 38px;
		background:#FFC835; 
		box-shadow: 0px 4px 13px 0px rgba(44, 5, 5, 0.24);
		color: #fff;
		font-size: 25px;
		line-height: 38px;
		text-align: center;	
		cursor: pointer;
		margin-top: 15px;
		border-radius: 3px;
	}
</style>
